<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/ZRT.css"/>
	</head>
	<script src="../js/move(1).js"></script>
	<script src="../js/ZRT.js"></script>
	<body>
		
		<div class="header2">
			<div class="logo2">
				<img src="../img/logo.png" >
			</div>
			<div class="nav2">
				<ul class="max-nav2">
					<li>
					    <a href="ZRT.html" class="firstNav">首页</a>
				    </li>
				    <li>
				        <a href="List.html" class="firstNav"><span>护肤</span></a>
				    </li> 
				    <li>
						<a href="List.html" class="firstNav"><span>面膜</span></a>
				    </li>
				    <li>
						<a href="List.html"  class="firstNav"><span>彩妆</span></a>
				    </li>
				    <li>
						<a href="List.html" class="firstNav"><span>男士</span></a>
				    </li>
				    <li class="secList">
						<a href="http://www.baidu.com" ="club firstNav">会员俱乐部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<ol>
							<li>
								<a href="">会员礼遇</a>
							</li>
							<li>
								<a href="">会员章程</a>
							</li>
							<li>
								<a href="">积分规则</a>
							</li>
				      </ol>
				    </li>
				    <li class="secList">
				      <a href="http://www.baidu.com" class="about firstNav">关于自然堂</a>
				      <ol>
							<li>
								<a href="">品牌故事</a>
							</li>
							<li>
								<a href="">品牌资讯</a>
							</li>
							<li>
								<a href="">品牌价值观</a>
							</li>
				      </ol>
				    </li>
					<li>
						<a href="http://www.baidu.com" class="firstNav">专柜查询</a>
					</li>
				    <li>
						<a href="http://www.baidu.com" class="firstNav">防伪查询</a>
					</li>
				</ul>	
				<ul class="min-nav2">
					<li><a href="http://www.baidu.com"><img src="../img/search.png" ></a></li>
					<li><a href="shppcart.html"><img src="../img/shopping-cart.png" href="shppcart.html"></a></li>
					<li><a href="denglu.html"><img src="../img/my.png" href="denglu.html"></a></li>
				</ul>
			</div>
		</div>
		<div class="header">
			<div class="logo">
				<img src="../img/logo.png" >
			</div>
			<div class="nav">
				<ul class="max-nav">
					<li>
					    <a class="firstNav">首页</a>
				    </li>
				    <li>
				        <a href="List.html" class="firstNav"><span>护肤</span></a>
				    </li> 
				    <li>
						<a href="List.html" class="firstNav"><span>面膜</span></a>
				    </li>
				    <li>
						<a href="List.html" class="firstNav"><span>彩妆</span></a>
				    </li>
				    <li>
						<a href="List.html" class="firstNav"><span>男士</span></a>
				    </li>
				    <li class="secList">
						<a href="List.html" class="club firstNav">会员俱乐部</a>
						<ol>
							<li>
								<a href="">会员礼遇</a>
							</li>
							<li>
								<a href="">会员章程</a>
							</li>
							<li>
								<a href="">积分规则</a>
							</li>
				      </ol>
				    </li>
				    <li class="secList">
				      <a href="#" class="about firstNav">关于自然堂</a>
				      <ol>
							<li>
								<a href="">品牌故事</a>
							</li>
							<li>
								<a href="">品牌资讯</a>
							</li>
							<li>
								<a href="">品牌价值观</a>
							</li>
				      </ol>
				    </li>
					<li>
						<a href="#" class="firstNav">专柜查询</a>
					</li>
				    <li>
						<a href="#" class="firstNav">防伪查询</a>
					</li>
				</ul>	
				<ul class="min-nav">
					<li><a href=""></a><img src="../img/search.png" ></li>
					<li><a href="shppcart.html"><img src="../img/shopping-cart.png"></a></li>
					<li><a href="denglu.html"><img src="../img/my.png" ></a></li>
				</ul>
			</div>
		</div>
		
	
		<div class="banner">
			<ul id="banner-ul">
				<li><img src="../img/2.jpg" ></li>
				<li><img src="../img/D3A3195A-B10E-41E9-928B-CDE93A9A161C.jpeg" ></li>
				<li><img src="../img/pc_banner4.jpg" ></li>
				<li><img src="../img/r.jpg" ></li>
				<li><img src="../img/2.jpg" ></li>
			</ul>
		 	<div id="buutton-left"><span> < </span></div>
		 	<div id="button-right"><span> > </span></div>
		 	<ol id="banner-ol">
		 	
			</ol>
		 </div>
		 <div class="index">
			<div class="starshop">
				<h3>明星单品</h3>
				<p>
					十大当季明星单品
					<span>查看榜单</span>
				</p>
				<div class="scrollshops">	
				<ul>
					<li>
						<img src="../img/starShop1.png" >
						<p class="tips1">
							<i><img src="../img/ten_tips.png" ></i>
							<span>保湿滋润</span>
							<span>无限回购</span>
							<span>明星推荐</span>
						</p>
						<div class="tips2">
							<p>[小紫瓶精华] 3种成分 击退熬夜肌</p>
							<p>凝时鲜颜肌活修护精华液</p>
							<p>35ml / ¥240.00</p>
							<a href="">立即购买</a>
						</div>
					</li>
					<li>
						<img src="../img/starShop5.png" >
						<p class="tips1">
							<i><img src="../img/ten_tips.png" ></i>
							<span>无限回购</span>
							<span>淡化细纹</span>
							<span>焕亮眼周</span>
						</p>
						<div class="tips2">
							<p>「小紫瓶熬夜眼霜」熬夜不怕熊猫眼</p>
							<p>凝时鲜颜肌活修护眼霜</p>
							<p>15g / ¥240.00</p>
							<a href="">立即购买</a>
						</div>
					</li>
					<li>
						<img src="../img/starShop7.png" >
						<p class="tips1">
							<i><img src="../img/ten_tips.png" ></i>
							<span>滋养保湿</span>
							<span>摆脱暗沉</span>
							<span>无限回购</span>
						</p>
						<div class="tips2">
							<p>「烟酰胺安瓶面膜」4%烟酰胺，肌肤“橡皮擦”</p>
							<p>烟酰胺细致提亮安瓶面膜</p>
							<p>>5片 / ¥138.00</p>
							<a href="">立即购买</a>
						</div>
					</li>
				</ul>
				<dl>
					<dd>
						<img src="../img/starShop3.png">
						<div class="tips">
							<p>
								<i><img src="../img/ten_tips.png" ></i>
								<span>持久妆效</span>
								<span>养肤提亮</span>
						        <span>明星好物</span>	
							</p>
							<div class="tips3">
								<p>「持妆粉底液」高遮瑕 长持妆 不暗沉</p>
								<p>油皮亲妈*感光无瑕持妆粉底液</p>
								<p>30ml / ¥150.00</p>
								<a href="">立即购买</a>
							</div>
						</div>
					</dd>
					
					<dd>
						<img src="../img/starShop2.png">
						<div class="tips">
							<p>
								<i><img src="../img/ten_tips.png" ></i>
								<span>补水救星</span>
								<span>温和舒缓</span>
						        <span>高性价比</span>	
							</p>
							<div class="tips3">
								<p>「冰肌水」堪比精华液的冰肌水</p>
								<p>雪域纯粹滋润冰肌水（清润型）</p>
								<p>160ml / ¥150.00</p>
								<a href="">立即购买</a>
							</div>
						</div>
					</dd>
				</dl>
				</div>
			</div> 
			<div class="goodshop">
				<h3>好物推荐</h3>
				<div class="hufu">
					<p> <img src="../img/hufuBg.png" ></p>
					<ul>
						<li><img src="../img/mianmo.png" ></li>
						<li><img src="../img/caizhuang.png" ></li>
						<li><img src="../img/nanshi.png" ></li>
						<li><img src="../img/gehu.png" ></li>
					</ul>
				</div>
				<div class="zhongcao">
					<a href=""><img src="../img/zhongcaoBg.png" ></a>
				<p>宝藏女孩的变美秘籍，你get了嘛？</p>	
				</div>
				<div class="questionnaire">
					<div class="p">
						<p>好物推荐</p>
						<p>适合我的产品</p>
					</div>
					<p>问卷及推荐</p>
				</div>
			</div>
			<div class="aboutchcedo">
				<h3>关于自然堂</h3>
				<div class="video">
					<video src="../img/about_%201350_630.mp4"poster="../img/about_pc.jpg" controls="controls"></video>
					<img class="img1" src="../img/play.png" >
					
				</div>
				<ul class="aboutList">
					<li><a href=""><img src="../img/about1.png" ></a></li>
					<li><a href=""><img src="../img/about2.png" ></a></li>
					<li><a href=""><img src="../img/about3.png" ></a></li>
					<li><a href=""><img src="../img/about4.png" ></a></li>
					<li><a href=""><img src="../img/about5.png" ></a></li>
					<li><a href=""><img src="../img/about6.png" ></a></li>
				</ul>
			</div>
		 </div>
		 <div class="Margin">
			 <div class="margin">
				 <h3>官网特别服务 </h3>
				 <ul class="serviceList">
					<li>
						<img src="../img/apply.png" >
						<p>试用申领</p>
					</li> 
					<li>
						<img src="../img/shop.png" >
						<p>积分商城</p>
					</li>
					<li>
						<img src="../img/counter.png" >
						<p>专柜查询</p>
					</li>
					<li>
						<img src="../img/anti.png" >
						<p>防伪查询</p>
					</li>
				 </ul>
				 <div class="bottom">
					 <ul>
					 	<li>
							<h3>官网福利</h3>
							<p>正品保证</p>
							<p>贴心售后</p>
							<p>首购有礼</p>
							<p>全场包邮</p>
						</li>
						<li>
							<h3>使用规范</h3>
							<p>使用条款</p>
							<p>隐私政策</p>
							<p>Cookies政策</p>
						</li>
						<li>
							<h3>联系我们</h3>
							<p>总机：</p>
							<p>021-62220000</p>
							<p>客服热线：</p>
							<p>400-888-2788</p>
						</li>
						<li>
							<h3>关注我们</h3>
							<p>
								<img src="../img/wechart.png" ><span>官网微信</span>
							</p>
							<p>
								<img src="../img/weibo.png" >
								<span>官网微博</span>
							</p>
						</li>
					 </ul>
					 
				 </div>
			 </div>
		 </div>
		 
		 <div class="last">
			 
			 <p>国家药监局提示您：请正确认识化妆品功效，化妆品不能替代药品，不能治疗皮肤病等疾病。</p>
			 <p>&copy;2020 伽蓝(集团)股份有限公司版权所有<span><img src="../img/icp_ico.png" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			 沪ICP备09100493号-3</span></p>
			
		 </div>
	</body>
</html>
<script>
	let bannerleft = document.getElementById("buutton-left");
	let bannerright = document.getElementById("button-right");
	let oUl = document.getElementById("banner-ul");
	let oBanner = document.querySelector(".banner");
	let oOl = document.getElementById("banner-ol");
	let nana= new Banner(bannerleft,bannerright,oUl,oOl,oBanner);

	$(window).scroll(function(){
		if($(this).scrollTop()>100){
			$(".header2").css("display","flex");
		}else{
			$(".header2").css("display","none");
		}
	})
	$(".img1").click(function(){
		$(".img1").css("display","none");
		$("video")[0].play();
	})
	$("video").on("click",function(){
		$(".img1").css("display","none");
	})
</script>
